import 'package:eh_mobile/common/utils/extension.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class RoomListTabbar extends StatefulWidget {
  const RoomListTabbar(
      {super.key, required this.roomList, required this.onTabChanged});
  final List roomList;
  final ValueChanged<int> onTabChanged;
  @override
  State<RoomListTabbar> createState() {
    return _RoomListTabbarState();
  }
}

class _RoomListTabbarState extends State<RoomListTabbar> {
  final _tabController = ScrollController();
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return _buildRoomTabbar();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  // 创建顶部房间选择tabbar
  Widget _buildRoomTabbar() {
    return SizedBox(
      height: 56.h,
      width: 1.sw,
      child: ListView(
        controller: _tabController,
        padding: const EdgeInsets.only(
          left: 12,
          right: 12,
          bottom: 24,
        ).r,
        scrollDirection: Axis.horizontal,
        children: _buildTabBarTabs,
      ),
    );
  }

  List<Widget> get _buildTabBarTabs {
    var list = <Widget>[];
    for (var i = 0; i < widget.roomList.length; i++) {
      Widget smartTabItem = _SmartTabItem(
        // key: controller.tabbarGlobalKeys[i],
        widget.roomList[i],
        selected: (i == _currentIndex ? true : false),
      ).onClick(() {
        setState(() {
          _currentIndex = i;
        });
        widget.onTabChanged(i);
      });

      list.add(smartTabItem);
      if (i < widget.roomList.length - 1) {
        list.add(12.sizedBoxWidth);
      }
    }
    return list;
  }
}

// 灯光控制页面房间tabbar按钮
class _SmartTabItem extends StatelessWidget {
  const _SmartTabItem(this.title, {super.key, required this.selected});
  final String title;
  final bool selected;

  @override
  Widget build(BuildContext context) {
    return Container(
      color:const Color.fromRGBO(222, 222, 222, 0.08) ,
      padding: const EdgeInsets.only(left: 11, right: 11).r,
      height: 32.h,
      child: Row(
        children: [
          Container(
            width: 3.r,
            height: 8.h,
            decoration: BoxDecoration(
              color: selected
                  ? const Color.fromRGBO(255, 255, 255, 0.25)
                  : const Color.fromRGBO(255, 218, 75, 1),
              borderRadius: const BorderRadius.all(Radius.circular(2)),
            ),
          ),
          6.sizedBoxWidth,
          Text(title, style: 14.ts)
        ],
      ),
    ).border(borderColor: const Color.fromRGBO(222, 222, 222, 0.35));
  }
}
